<script lang='ts' setup>
import { reactive, ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import Oauth2ClientDetailsServiceApi from '/@/api/org/bean/oauth2-client-details'
import { SearchFormColumn } from '/@/components/platform/search/search-form/interface'
import { deletePageTableSelectionPkList } from '/@/utils/api-service'
import { Oauth2ClientDetailsEditUrl } from '/@/views/org/mapping.json'


const Oauth2ClientDetailsPageTableRef = ref()
const router = useRouter()


const queryColumn: SearchFormColumn[] = [
    { name: 'clientId', type: 'input', label: '客户端ID', placeholder: '请输入客户端ID' }
]
const Oauth2ClientDetailsState = reactive({
    // ////////////////////搜索部分/////////////////////////////////////////
    queryForm: { likeAll: null },
    queryColumn,
    ///////////////////////表格部分//////////////////////////////////////
    /**
     * 表格的列配置
     */
    tableColumn: [
        { label: '序号', width: '50', type: 'selection' },
        { label: '序号', width: '50', type: 'index' },
        {
            prop: "clientId", label: "客户端ID", width: "180", align: 'left', showOverflowTooltip: true, sort: { sortable: 'custom' }, type: 'link',
            linkClick: (row: any) => {
                router.push({ path: Oauth2ClientDetailsEditUrl + row.clientId })
            }
        },
        { prop: "webServerRedirectUri", label: "回调地址", align: 'left', columnKey: "webServerRedirectUri" },
        { prop: "accessTokenValidity", label: "令牌超时时间（秒）", align: 'left', columnKey: "accessTokenValidity" },
        { prop: "refreshTokenValidity", label: "刷新令牌超时时间（秒）", showOverflowTooltip: true, columnKey: "refreshTokenValidity" },
        { prop: "resourceIds", label: "可访问微服务", columnKey: "resourceIds" },
    ],
    /**
     * 表格数据加载的方法
     */
    loadData: (params: any) => Oauth2ClientDetailsServiceApi.queryPage(null, { ...params, ...Oauth2ClientDetailsState.queryForm }),
    /**
     * 表格导出excel的方法
     */
    expData: (params: any) => Oauth2ClientDetailsServiceApi.exportData(null, { ...params, ...Oauth2ClientDetailsState.queryForm }),
    /**
     * 表格删除事件
     */
    deleteTableData: () => {
        //删除表格数据提供两种不同的api 一个是整行数据数组删除 一个是取行主键id数组删除
        deletePageTableSelectionPkList(Oauth2ClientDetailsPageTableRef, Oauth2ClientDetailsServiceApi)
    },
    /**
     * 搜索事件触发
     */
    handleSearch: () => {
        nextTick(() => {
            Oauth2ClientDetailsPageTableRef.value.loadTable()
        })
    },

})

defineExpose({
    getOauth2ClientDetailsPageTableRef: () => Oauth2ClientDetailsPageTableRef.value,
    onDelButtonClick: () => Oauth2ClientDetailsState.deleteTableData()
})

</script>
<template>
    <div>
        <div class="container-card">
            <jxtech-page-table
                ref="Oauth2ClientDetailsPageTableRef"
                row-key="clientId"
                :table-column="Oauth2ClientDetailsState.tableColumn"
                :load-data="Oauth2ClientDetailsState.loadData"
                :downloadShow="false"
                fit="full"
            >
                <template #header>
                    <div class="jxtech-page-table-header-flex">
                        <jxtech-search-form
                            :query-column="Oauth2ClientDetailsState.queryColumn"
                            :query-form="Oauth2ClientDetailsState.queryForm"
                            @handle-search="Oauth2ClientDetailsState.handleSearch"
                            :col-span="12"
                        ></jxtech-search-form>
                    </div>
                </template>
            </jxtech-page-table>
        </div>
    </div>
</template>

<style scoped>
</style>